<template>
  <div style="margin-bottom: 80px">
    <h1>组件 v-model</h1>
    <div class="group">
      <h2>sonDemo18</h2>
      <div>
        <button type="button" @click="mVal++">在父组件修改 mVal 的值</button>
        <SonDemo18
          :mVal="mVal"
          @update:mVal="
            (val) => {
              mVal = val
            }
          "
        ></SonDemo18>
      </div>
    </div>
    <hr />
    <div class="group">
      <h2>sonDemo19</h2>
      <div>
        <p @click="mVal++">父组件绑定的值：{{ mVal }}</p>

        <p
          @click="
            () => {
              userInfo.age++
            }
          "
        >
          父-用户信息：{{ userInfo }}
        </p>
        <SonDemo19
          :mVal="mVal"
          :mVal2="mVal2"
          :userInfo="userInfo"
          @update:mVal="
            (val) => {
              mVal = val
            }
          "
          @update:mVal2="
            (val: any) => {
              mVal2 = val
            }
          "
          @update:userInfo="
            (val: any) => {
              userInfo = val
            }
          "
        ></SonDemo19>
      </div>
    </div>
    <hr />
    <div class="group">
      <h2>sonDemo20</h2>
      <div>
        <p @click="mVal++">父组件绑定的值：{{ mVal }}</p>
        <SonDemo20 v-model="mVal"></SonDemo20>
      </div>
    </div>
    <hr />
    <div class="group">
      <h2>sonDemo21</h2>
      <div>
        <p @click="title = '修改后的值'">父组件绑定 标题： {{ title }}</p>
        <p>父组件绑定 内容： {{ msg }}</p>
        <p>父book:{{ book }}</p>
        <SonDemo21 v-model:msg="msg" v-model:title="title" v-model:book-info="book"></SonDemo21>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study4StuDemo7'
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
import SonDemo18 from './components/SonDemo18.vue'
import SonDemo19 from './components/SonDemo19.vue'
import SonDemo20 from './components/SonDemo20.vue'
import SonDemo21 from './components/SonDemo21.vue'
import { type Book } from './components/SonDemo21.vue'

const mVal = ref(100)

const mVal2 = ref(3000)

const userInfo = ref({ name: '郭嘉', sex: '男', age: 22 })

// 绑定多值
const title = ref('父组件标题')
const msg = ref('父组件内容')

const book = ref<Book>({ title: '盗墓笔记', author: '南派三叔', year: 3000 })
</script>

<style lang="scss" scoped>
.group {
  border: 1px solid rgb(60, 130, 200);
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
}
</style>
